<template>
  <!-- 写在vue中的template标签里只允许存在一个div根标签 -->
  <div>
   <!-- 头部 -->
   <!-- 
     1.创建一个公共组件 
        头部结构
        头部样式
      2.使用公共组件
        1.引入到使用的vue页面中来
        2.注册组件 components:{Header}
        3.使用组件


    -->
   <Header></Header>
   <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <!-- {{carousels}} -->
      <div class="carousel">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 板块 -->
      <div class="plates">
        <div class="wrapper">
          <!-- {{categoryList}} --> 
          <div class="plate" v-for="cas in categoryList" :key="cas.category.id">
            <div class="head">
              <div class="title">{{cas.category.name}}</div>
              <div class="more">更多&gt;&gt;</div>
            </div>
            <ul class="list">
              <li v-for='a in cas.aritcle' :key='a.id'>{{a.title}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer/>
<!--     
    <Footer></Footer> -->
    <!-- /底部 -->
    
  </div>
</template>
<script>
import { get } from "../utils/request";
// 1.引入头部组件
import Header from '../components/Header';
// 1.引入底部组件
import Footer from '../components/Footer';
export default {
  // 2.注册组件
  components:{
    // Header:Header
    Header,
    Footer
  },
  // 存储vue变量
  data() {
    return {
      carousels:[],
      categoryList:[]  
    };
  },
  // vue在各个阶段执行的函数 生命周期 钩子函数
  created() {
    this.loadCarousel();
    this.loadArticle()
  },
  // 方法 事件处理程序
  methods: {
    //封装加载文章
    loadArticle(){
      let url='/index/article/findCategoryArticles';
      get(url).then((res)=>{
         (res)=>{} // 箭头函数没有this 不同考虑this指向
        this.categoryList=res.data;
      })
    },
    // 封装加载轮播图
    loadCarousel() {
      let url = "/index/carousel/findAll";
      // es6箭头函数
      // (a)=>{b}
      // function(a){b}
      get(url).then(resp => {
        // es6箭头函数没有this指向--this指向vue实例
        this.carousels = resp.data;
      });
    }
  }
};
</script>
<style lang="scss">

// 体部样式
.content {
  background-color: #ecf6f2;
  .carousel {
    img {
      width: 100%;
    }
  }
  .plates {
      margin-top: 2em;

    & > .wrapper::after {
      display: block;
      content: "";
      clear: both;
    }

    .plate {

      float: left;
      width: 32.5%;
      height: 300px;
      background-color: #fff;
      margin-right: 1.25%;
      margin-bottom: 0.8em;
      ul.list > li {
        line-height: 3em;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      ul > li:hover {
        color: #028b39;
        cursor: pointer;
      }
      .head {
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 18px;
          font-weight: bold;
          color: #028b39;
          cursor: pointer;
        }
        .more {
          color: #999;
          cursor: pointer;
        }
      }
    }
    .plate:nth-child(3n) {
      margin-right: 0;
    }
  }
}


</style>
